<template>
  <div class="Movies">
    <h1>Movies</h1>
    <ol>
      <li v-for="item of movieList" :key="item.tvId">
        {{ item.focus }}
      </li>
    </ol>
    <h3>评分7.0以下的电影</h3>
    <ul>
      <!-- 通过属性访问 this.$store.getters.movieScore-->
      <li v-for="item of movieScore" :key="item.tvId">
        {{ item.focus }}
      </li>
    </ul>
    <h3>时长2-3小时电影</h3>
    <ol>
      <li v-for="item of movieTimes" :key="item.tvId">{{ item.focus }}</li>
    </ol>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  name: "Movies",
  mounted() {
    console.log(this);
  },
  updated() {
    //console.log(this.$store.getters);
  },
  computed: {
    //mapState 辅助函数映射生成计算属性
    ...mapState("Movie", ["movieList"]),

    //mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
    ...mapGetters("Movie", ["movieScore"]),
    /*
      展开如下
      movieScore(){
        return this.$store.getters.movieScore
      }
    */
    movieTimes() {
      //当getters中的计算属性值是一个函数的时候，需要在使用的时候调用
      //但是这样的化就可以传递参数了
      // getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果
      return this.$store.getters["Movie/movieTimes"]({ start: 2, over: 3 });
    },
  },
};
</script>

<style scoped>
.Movies {
  width: 300px;
  margin: 0 auto;
  background-color: seagreen;
}
</style>
